<template>
    <div style="display: flex;align-items: center;justify-content: center;" >
        <!-- 预览单个问题 -->
        <div style="width: 100%;height: 100%;overflow-y: auto;" >
            <div style="width: 100%;display: flex;flex-direction: column;padding: 16px;align-items: flex-start;justify-content: flex-start;" >
                <div style="width: 100%;line-height: 1.5;" >
                    <div style="line-height: inherit;" >
                        <span>第{{ data.item.index }}题 </span><span>{{ data.item.stems }}</span>
                    </div>
                    <img style="max-height: 300px;height: 300px;object-fit: contain;width: 100%;" v-if="data.item.img" :src="data.item.img">
                    <div style="line-height: inherit;" >
                        <span>A. </span><span v-if="data.item.optionAType!=='image'" >{{ data.item.optionA }}</span><img style="width: 100%;max-height: 200px;object-fit: contain;" v-if="data.item.optionAType==='image'" :src="data.item.optionA"   alt="">
                    </div>
                    <div style="line-height: inherit;" >
                        <span>B. </span><span v-if="data.item.optionBType!=='image'" >{{ data.item.optionB }}</span><img style="width: 100%;max-height: 200px;object-fit: contain;" v-if="data.item.optionBType==='image'" :src="data.item.optionB"   alt="">
                    </div>
                    <div style="line-height: inherit;" >
                        <span>C. </span><span v-if="data.item.optionCType!=='image'" >{{ data.item.optionC }}</span><img style="width: 100%;max-height: 200px;object-fit: contain;" v-if="data.item.optionCType==='image'" :src="data.item.optionC"   alt="">
                    </div>
                    <div style="line-height: inherit;" >
                        <span>D. </span><span v-if="data.item.optionDType!=='image'" >{{ data.item.optionD }}</span><img style="width: 100%;max-height: 200px;object-fit: contain;" v-if="data.item.optionDType==='image'" :src="data.item.optionD"   alt="">
                    </div>
                </div>
            </div>
        </div>
        <!-- 解析出来的图片列表 -->
        <div style="min-width: 300px;height: 100%;border-left: 1px solid rgb(230,230,230);display: flex;flex-direction: column;max-width: 300px;" >
            <div style="width: 100%;min-height: 30px;display: flex;align-items: center;justify-content: flex-start;font-size: 14px;padding: 0 8px;background-color: rgb(230,230,230);" >
                文档中解析出的图片
            </div>
            <div style="width: 100%;height: 100%;overflow-y: auto;padding: 8px 0;" >
                <div v-for="(item, index) in data.images" style="width: 100%;height: 240px;padding: 8px 16px;" >
                    <div style="width: 100%;height: 100%;border-radius: 16px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);border: 1px solid rgb(0,120,215);overflow: hidden;" >
                        <div style="width: 100%;height: 184px;" >
                            <img style="width: 100%;height: 100%;object-fit: contain;" :src="item" alt="无效的图片">
                        </div>
                        <div style="width: 100%;height: 40px;background-color: rgb(242,242,242);border-top: 1px solid rgb(230,230,230);display: flex;align-items: center;justify-content: flex-end;padding-right: 8px;" >
                            <cButton @click="()=>{
                                try {
                                    data.callBack({
                                        op:'deleteImage',
                                        index
                                    })
                                } catch (error) {
                                    
                                }
                            }" >删除</cButton>
                            <cButton v-if="index!=(data.images.length-1)" @click="()=>{
                                try {
                                    data.callBack({
                                        op:'upImage',
                                        index
                                    })
                                } catch (error) {
                                    
                                }
                            }" style="margin-left: 4px;" >下移</cButton>
                            <cButton v-if="index" @click="()=>{
                                try {
                                    data.callBack({
                                        op:'downImage',
                                        index
                                    })
                                } catch (error) {
                                    
                                }
                            }" style="margin-left: 4px;" >上移</cButton>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../modules/tool'
import cButton from '../components/cButton.vue'

const props = defineProps({
    data:{
        type:Object,
        default:undefined
    }
})

onMounted(async () => {

})

</script>

<style scoped></style>